<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>菜单管理页面</title>
    <link rel="stylesheet" href="css/index/index.css">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/loginOut.css">
    <script src="lib/js/jquery-1.12.4.js"></script>
    <script src="js/loginText.js"></script>
    <script src="lib/js/bootstrap.js"></script>


</head>

<body>
    <!-- left 侧边栏 start -->
    <header>
        <div class="header_content">
            您好，<span class="actor"></span>！
            <div class="loginOut">
                退出
                <span class="iconfont icon-tuichu"></span>
            </div>
        </div>
    </header>
    <div class="content">
        <div id="left">
            <div class="menu">菜单栏</div>
            <div class="panel-group my-panel-group" id="accordion1">
                <!-- todo -->
            </div>






        </div>
        <!-- left 侧边栏 end -->

        <div class="right">
            <div class="header">菜单管理页面</div>
            <div class="right_content">
                <div class="panel-group categoryManage panel-group-my" id="accordion2" role="tablist" aria-multiselectable="true">

                    <!-- todo -->


                </div>
                <div class="page">
                    <button type="button" class="btn btn-primary addSunCategory"><a href="addCategory.html"
                            style="color: #fff; text-decoration: none;">添加菜单信息</a></button>
                </div>


            </div>
        </div>
    </div>
    <footer>
    </footer>
    <div class="footer_content1">权限管理系统2020</div>
</body>
<!-- 左 -->
<script type="text/template" id="myFormDataY">
    <%for(var i = 0; i < data.length; i++) {%>

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                    <div class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1"
                        href="#<%=i+7%>" aria-expanded="false" aria-controls="<%=i+7%>">
                        <span><%=data[i].father%></span>
                    </div>
                </h4>
            </div>
            <div id="<%=i+7%>" class="panel-collapse collapse" role="tabpanel"
                aria-labelledby="headingOne">
                <div class="panel-body" style="color: #337AB7">
                    <%for(var j = 0; j < data[i].sun.length; j++) {%>
                        <div style="margin-top: 20px"><a href="<%=data[i].sun[j].url%>"><%=data[i].sun[j].name%></a></div>
                    <%}%>
                </div>
            </div>
        </div>
    <% } %>
</script>

<!-- 表格渲染 -->
<script type="text/template" id="myFormData">

    <%for(var i = 0; i < data.length; i++) {%>

    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title">
                <div class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2"
                    href="#<%=i+1%>" aria-expanded="false" aria-controls="<%=i+1%>">
                    <span><%=data[i].father%></span> <a class="btn btn-success btn-sm fatherEdit"
                        style="margin-left: 50px" href="editCategory.html?old=<%=data[i].father%>">编辑</a><button class="btn btn-danger btn-sm fatherDelete"
                        style="margin-left: 50px" data-category="<%=data[i].father%>">删除</button>
                </div>
            </h4>
        </div>
        <div id="<%=i+1%>" class="panel-collapse collapse" role="tabpanel"
            aria-labelledby="headingTwo">
            <div class="panel-body">
                <table class="table table-bordered">
                    <tr class="info">
                        <td>#</td>
                        <td>菜单名称</td>
                        <td>url</td>
                        <td>操作</td>
                    </tr>

                    <%for(var j = 0; j < data[i].sun.length; j++) { %>
                    <tr class="info">
                        <td><%=j+1%></td>
                        <td><%=data[i].sun[j].name%></td>
                        <td><%=data[i].sun[j].url%></td>

                        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="button"
                                class="btn btn-success btn-sm"><a href="editSunCategory.html?name=<%=data[i].sun[j].name%>"
                                    style="color:#fff" data-fatherCategory="<%=data[i].father%>" data-sunCategory="<%=data[i].sun[j].name%>">编辑</a></button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button
                                type="button" class="btn btn-danger btn-sm deleteSun" data-fatherCategory="<%=data[i].father%>" data-sunCategory="<%=data[i].sun[j].name%>">删除</button></td>
                    </tr>
                    <% } %>
    
                </table>
            </div>
        </div>
    </div>
<% } %>

</script>
<script>
    window.onload = function () {

         // 获取当前用户信息
         var actor = JSON.parse(localStorage.getItem('userMessage')).actor
            console.log(actor)

            // 左边菜单栏渲染
            getActorCategory(function (res) {
                console.log(res)
                $('.my-panel-group').html(template('myFormDataY', {
                    data: res
                }))
            }, actor)



        // 获取所有字符类菜单，渲染数据
        function render() {
            getAllCategoryAndSunCategory(function (res) {
                console.log(res)
                $('.panel-group-my').html(template('myFormData', {
                    data: res
                }))
            })
        }
        render()

        // 大菜单删除按钮的绑定
        $('.categoryManage').on('click', '.fatherDelete', function (e) {
            // 阻止事件冒泡
            e.stopPropagation()
            // 获取要删除的父菜单名字
            var category = this.getAttribute('data-category')
            console.log(category)

            $.ajax({
                url: '/pages/category/deleteCategory',
                type: 'post',
                data: JSON.stringify({
                    category
                }),
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8',
                success: function (res) {
                    console.log(res)
                    if (res.success) {
                        $(this).parent().parent().remove()
                    } else if (res.error) {
                        window.alert(res.error)
                    }
                }
            })
        })

        // 子菜单删除按钮的绑定
        $('.categoryManage').on('click', '.deleteSun', function () {
            //获取要删除的子菜单名字
            var category = this.getAttribute('data-sunCategory')
            console.log(category)
            $.ajax({
                url: '/pages/category/deleteSunCategory',
                type: 'post',
                data: JSON.stringify({
                    category
                }),
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8',
                success: (res) => {
                    console.log(res)
                    if (res.success) {
                        $(this).parent().parent().remove()
                    } else if (res.error) {
                        window.alert(res.error)
                    }
                }
            })
        })


        // 父菜单删除事件的阻止冒泡
        $('.categoryManage').on('click', '.fatherDelete', function (e) {
            e.stopPropagation()
        })
        // 父菜单编辑事件的阻止冒泡
        $('.categoryManage').on('click', '.fatherEdit', function (e) {
            e.stopPropagation()
        })
    }

    // 获取所有父菜单和子菜单。。。父菜单带子菜单函数封装
    function getAllCategoryAndSunCategory(callback) {
        $.ajax({
            url: '/pages/category/getAllCategoryAndSunCategory',
            type: 'post',
            data: '',
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            success: function (res) {
                callback && callback(res)
            }
        })
    }
    // 根据角色获取左边菜单栏函数封装
    function getActorCategory(callback, actor) {
        $.ajax({
            url: '/pages/category/getAllCategoryAndSunCategoryByActor',
            type: 'post',
            data: JSON.stringify({
                actor
            }),
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            success: function (res) {
                callback && callback(res)
            }

        })
    }
</script>
<script src="lib/js/bootstrap-paginator.js"></script>
<script src="js/common.js"></script>
<script src="lib/js/template-native.js"></script>

<script src="lib/js/mock.js"></script>
<script src="mock/deleteCategory.js"></script>
<script src="mock/deleteSunCategory.js"></script>
<script src="mock/getAllCategory.js"></script>
<script src="mock/getCategoryByActor.js"></script>




</html>